<template>
  <div @dragstart="dragStart">
    <div class="card" @contextmenu="rightClick">
      <h4>按钮类型</h4>
      <div class="content">
        <Button>Default</Button>
        <Button type="primary">Primary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="text">Text</Button>
        <br />
        <br />
        <Button type="info">Info</Button>
        <Button type="success">Success</Button>
        <Button type="warning">Warning</Button>
        <Button type="error">Error</Button>
      </div>
    </div>
    <div class="card">
      <h4>幽灵按钮</h4>
      <div class="content">
        <Button type="default" ghost>Default</Button>
        <Button type="primary" ghost>Primary</Button>
        <Button type="dashed" ghost>Dashed</Button>
        <Button type="text" ghost>Text</Button>
        <Button type="info" ghost>Info</Button>
        <Button type="success" ghost>Success</Button>
        <Button type="warning" ghost>Warning</Button>
        <Button type="error" ghost>Error</Button>
      </div>
    </div>
    <div class="card">
      <h4>图标按钮及按钮形状</h4>
      <div class="content">
        <Button type="primary" shape="circle" icon="ios-search"></Button>
        <Button type="primary" icon="ios-search">Search</Button>
        <Button type="primary" shape="circle" icon="ios-search">Search</Button>
        <Button type="primary" shape="circle">Circle</Button>
        <br />
        <br />
        <Button shape="circle" icon="ios-search"></Button>
        <Button icon="ios-search">Search</Button>
        <Button shape="circle" icon="ios-search">Search</Button>
        <Button shape="circle">Circle</Button>
      </div>
    </div>
    <div class="card">
      <h4>按钮尺寸</h4>
      <div class="content">
        <RadioGroup v-model="buttonSize" type="button">
          <Radio label="large">Large</Radio>
          <Radio label="default">Default</Radio>
          <Radio label="small">small</Radio>
        </RadioGroup>
        <br />
        <br />
        <Button :size="buttonSize" type="primary">Primary</Button>
        <Button :size="buttonSize" type="default">Default</Button>
        <Button :size="buttonSize" type="dashed">Dashed</Button>
        <Button :size="buttonSize" type="text">Text</Button>
        <br />
        <br />
        <Button :size="buttonSize" icon="ios-download-outline" type="primary" shape="circle"></Button>
        <Button :size="buttonSize" icon="ios-download-outline" type="primary">Download</Button>
        <br />
        <br />
        <ButtonGroup :size="buttonSize">
          <Button :size="buttonSize" type="primary">
            <Icon type="ios-arrow-back" />
            Backward
          </Button>
          <Button :size="buttonSize" type="primary">
            Forward
            <Icon type="ios-arrow-forward" />
          </Button>
        </ButtonGroup>
      </div>
    </div>
    <div class="card">
      <h4>长按钮</h4>
      <div class="content">
        <Button type="success" long>SUBMIT</Button>
        <br />
        <br />
        <Button type="error" long>DELETE</Button>
      </div>
    </div>
    <div class="card">
      <h4>不可用状态</h4>
      <div class="content">
        <!-- 需要修改样式，设置能拖动 -->
        <Button disabled>Default(Disabled)</Button>
        <br />
        <Button type="primary" disabled>Primary(Disabled)</Button>
        <br />
        <Button type="dashed" disabled>Dashed(Disabled)</Button>
        <br />
        <Button type="text" disabled>Text(Disabled)</Button>
      </div>
    </div>
    <div class="card">
      <h4>按钮组纵向排列</h4>
      <div class="content">
        <ButtonGroup vertical>
          <Button icon="logo-facebook"></Button>
          <Button icon="logo-twitter"></Button>
          <Button icon="logo-googleplus"></Button>
          <Button icon="logo-tumblr"></Button>
        </ButtonGroup>
      </div>
    </div>
    <div class="card">
      <h4>跳转</h4>
      <div class="content">
        <!-- 新页面打开有bug，暂时查不出原因 Todo -->
        <Button to="1" target="_blank">Normal</Button>
        <Button to="1" replace target="_blank">No history</Button>
        <Button to="1" target="_blank">New window</Button>
      </div>
    </div>
    <div class="card">
      <h4>加载中</h4>
      <div class="content">
        <Button type="primary" loading>Loading...</Button>
        <!-- <Button type="primary" :loading="loading" @click="toLoading">
          <span v-if="!loading">Click me!</span>
          <span v-else>Loading...</span>
        </Button> -->
        <!-- <Button type="primary" :loading="loading2" icon="ios-power" @click="toLoading2">
          <span v-if="!loading2">Click me!</span>
          <span v-else>Loading...</span>
        </Button> -->
        <Button loading shape="circle"></Button>
        <Button loading shape="circle" type="primary"></Button>
      </div>
    </div>
    <div class="card">
      <!-- 组合按钮先不做 -->
      <h4>按钮组合</h4>
      <div class="content">
        <ButtonGroup>
          <Button>Cancel</Button>
          <Button type="primary">Confirm</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button disabled>Yesterday</Button>
          <Button disabled>Today</Button>
          <Button disabled>Tomorrow</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button type="primary">L</Button>
          <Button>M</Button>
          <Button>M</Button>
          <Button type="dashed">R</Button>
        </ButtonGroup>
        <br />
        <br />
        <h4>组合按钮图标</h4>
        <br />
        <br />
        <ButtonGroup>
          <Button type="primary">
            <Icon type="ios-arrow-back"></Icon>
            Backward
          </Button>
          <Button type="primary">
            Forward
            <Icon type="ios-arrow-forward"></Icon>
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button type="primary" icon="ios-skip-backward"></Button>
          <Button type="primary" icon="ios-skip-forward"></Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button icon="ios-color-wand-outline"></Button>
          <Button icon="ios-sunny-outline"></Button>
          <Button icon="ios-crop"></Button>
          <Button icon="ios-color-filter-outline"></Button>
        </ButtonGroup>
        <br />
        <br />
        <h4>组合按钮圆形</h4>
        <br />
        <br />
        <ButtonGroup shape="circle">
          <Button type="primary">
            <Icon type="ios-arrow-back"></Icon>
            Backward
          </Button>
          <Button type="primary">
            Forward
            <Icon type="ios-arrow-forward"></Icon>
          </Button>
        </ButtonGroup>
        <ButtonGroup shape="circle">
          <Button type="primary" icon="ios-skip-backward"></Button>
          <Button type="primary" icon="ios-skip-forward"></Button>
        </ButtonGroup>
        <ButtonGroup shape="circle">
          <Button icon="ios-color-wand-outline"></Button>
          <Button icon="ios-sunny-outline"></Button>
          <Button icon="ios-crop"></Button>
          <Button icon="ios-color-filter-outline"></Button>
        </ButtonGroup>
        <br />
        <br />
        <h4>组合按钮尺寸</h4>
        <br />
        <br />
        <ButtonGroup size="large">
          <Button>Large</Button>
          <Button>Large</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button>Default</Button>
          <Button>Default</Button>
        </ButtonGroup>
        <ButtonGroup size="small">
          <Button>Small</Button>
          <Button>Small</Button>
        </ButtonGroup>
        <br />
        <br />
        <ButtonGroup size="large" shape="circle">
          <Button>Large</Button>
          <Button>Large</Button>
        </ButtonGroup>
        <ButtonGroup shape="circle">
          <Button>Default</Button>
          <Button>Default</Button>
        </ButtonGroup>
        <ButtonGroup size="small" shape="circle">
          <Button>Small</Button>
          <Button>Small</Button>
        </ButtonGroup>
      </div>
    </div>
    <Modal v-model="showRightModal" title="确认按钮" :footer-hide="true">
      <Button type="primary" @click="useStyle">使用此样式</Button>
    </Modal>
  </div>
</template>
<script>
// 深度合并
import mergeDeep from '@/utils/mergeDeep'
import mount from '@/components/mount.js'
import { getTemplate } from '@/components/template'
import { Button } from '@/components/data'
export default {
  data() {
    return {
      buttonSize: 'large',
      loading: false,
      loading2: false,
      showRightModal: false, //展示右键面板
      targetNode: null,
      attributes: Button,
    }
  },
  computed: {
    current: {
      //当前选中组件
      get(value) {
        return this.$store.state.currentComponent
      },
    },
  },
  mounted() {
    let nodeArr = document.getElementsByClassName('ivu-btn')
    for (var i = 0; i < nodeArr.length; i++) {
      nodeArr[i].draggable = true
    }
  },
  methods: {
    useStyle() {
    },
    toLoading() {
      this.loading = true
    },
    toLoading2() {
      this.loading2 = true
    },
    rightClick(e) {
      e.preventDefault()
      this.targetNode = e.target
      // 获取右键的按钮节点
      function getParent(node) {
        if (node) {
          if (node.nodeName !== 'BUTTON') {
            node = getParent(node.parentNode)
          } else if (node.parentNode == null) {
            node = null
          }
        }
        return node
      }
      this.targetNode = getParent(this.targetNode)
      if (this.targetNode) {
        // 暂时去掉右键弹窗模块---别删除---
        // this.showRightModal = true
        this.attributes.type.value = this.targetNode.__vue__.type
      }
    },
    // 模拟拖拽组件
    dragStart(e) {
      // 通过attributes上的key去匹配节点上的key

      Object.keys(this.attributes).forEach((item) => {
        switch (item) {
          case 'label':
            // 按钮间的文字需要重置属性key
            this.attributes.label.value = e.target.innerText
            break
          // case 'loading':
          //   // 还原loading
          //   this.attributes.loading.value = e.target.attributes.loading1 ? true : false
          //   break
          default:
            this.attributes[item].value = e.target.__vue__[item]
            break
        }
        // 
      })
      let componentName = 'Button'
      let info = {
        name: componentName,
        ui: 'iview-UI',
        open: false, // 组件树是否展开
      }
      //通过e.dataTransfer方法来存储被拖拽组件的信息，这样在ondrop的时候可以获取这个组件
      e.dataTransfer.setData('info', JSON.stringify(info))
      this.updateAttribute(this.attributes)
    },

    // 延迟更新组件，当组件渲染完成后，我们需要手动给它加上设置的样式
    updateAttribute(attr) {
      setTimeout(() => {
        this.$EventBus.$emit('getAttr', attr)
      }, 1000)
    },
    getParentComponent(component) {
      let components = JSON.parse(JSON.stringify(this.$store.state.components))
      if (component.parentId) {
        return this.getParentComponent(components.find((c) => c.info.id === component.parentId))
      } else {
        return component
      }
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  margin: 15px;
  .content {
    padding: 10px;
    margin-left: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 10px 0 #ddd;
  }
  button {
    margin: 5px;
  }
  /deep/.ivu-btn-loading,
  /deep/.ivu-btn.disabled > *,
  /deep/.ivu-btn[disabled] > * {
    // 值为none表示：元素不对指针事件做出反应。
    pointer-events: initial;
  }
}
</style>
